<template>
  <div class="pie-chart-container">
    <div ref="chartRef" class="pie-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref<HTMLElement | null>(null);

// 饼状图数据
const chartData = [
  { value: 9, name: "男" },
  { value: 2, name: "女" },
  { value: 0, name: "未知" },
];

onMounted(() => {
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartRef.value!);

  // 配置饼状图选项
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      left: "left",
      data: chartData.map(item => item.name)
    },
    series: [
      {
        type: "pie",
        radius: "70%",
        data: chartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };

  // 设置图表选项
  myChart.setOption(option);
});
</script>

<style scoped lang="scss">
.pie-chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdfdfd;
  padding: 20px;

  .pie-chart {
    width: 100%;
    height: 350px; // 饼状图高度
  }
}
</style>